<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>研学成果-精彩瞬间</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="css/school/school_commonality.css" />
		<link rel="stylesheet" type="text/css" href="css/school/school_studies_achievement_wonderful.css" />

		<!-- element引入开始 -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<!-- element引入结束 -->
	</head>
	<body>
		<header></header>
		<section>
			<div id="mDiv">
				<div id="rigbody">
					<h3 class="sca_xiangqing"><b>研学成果</b></h3>
					<p>【精彩瞬间】</p>
				</div>
				<!-- 精彩合集 -->
				<div id="center-top">
					<div id="photo">
						<p class="c"></p>
						<p class="tit">精彩合集</p>
					</div>
					<div class="picdir">
						<div class="dir">
							<a href="javascript:void(0);">
								<ul>
									<li><img src="img/school/1.png" /></li>
									<li><span class="secli">共180杀</span><span class="secli_two">2020/07/18</span></li>
									<li>2020/7/16日峡谷一日游</li>
								</ul>
							</a>
						</div>
						<div class="dir">
							<a href="javascript:void(0);">
								<ul>
									<li><img src="img/school/1.png" /></li>
									<li><span class="secli">共180杀</span><span class="secli_two">2020/07/18</span></li>
									<li>2020/7/16日峡谷一日游</li>
								</ul>
							</a>
						</div>
						<div class="dir">
							<a href="javascript:void(0);">
								<ul>
									<li><img src="img/school/1.png" /></li>
									<li><span class="secli">共180杀</span><span class="secli_two">2020/07/18</span></li>
									<li>2020/7/16日峡谷一日游</li>
								</ul>
							</a>
						</div>
						<div class="dir">
							<a href="javascript:void(0);">
								<ul>
									<li><img src="img/school/1.png" /></li>
									<li><span class="secli">共180杀</span><span class="secli_two">2020/07/18</span></li>
									<li>2020/7/16日峡谷一日游</li>
								</ul>
							</a>
						</div>

					</div>
				</div>


				<div class="content-bottom" id="app">
					<!-- 上传图片 -->
					<div id="photo">
						<p class="c"></p>
						<p class="tit">上传照片</p>
					</div>
					<div class="center-bot">
						<span>创建文件夹</span>
						<input class="file_folder_name" type="text" placeholder="请输入文件夹名字" />
						<input class="upd_button" type="button" value="确认上传" />
					</div>
					
					<div class="img_content">
						
						<el-upload action="https://jsonplaceholder.typicode.com/posts/" 
						list-type="picture-card" :on-preview="handlePictureCardPreview"
						 :on-remove="handleRemove" :auto-upload="false" :drag="true">
						 <i class="el-icon-plus"></i>
						 <span class="imgalert">支持拖拽上传</span>
						<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl">
						</el-dialog>
						</el-upload>
					</div>
				</div>
			</div>
		</section>
		<footer></footer>

		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/school/school_studies_achievement_wonderful.js" type="text/javascript" charset="utf-8"></script>

		<!-- 引入组件库 -->
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						dialogImageUrl: '',
						dialogVisible: false,
					};
				},
				methods: {
					handleRemove(file, fileList) {
						console.log(file, fileList);
					},
					handlePictureCardPreview(file) {
						this.dialogImageUrl = file.url;
						this.dialogVisible = true;
					}
				}
			})
		</script>
	</body>
</html>
